<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="title">网站后台管理</title>
    <script src="/static/js/jquery.min.js"></script>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }
        .content{
            width: 100%;
            height: 100vh;
            overflow-y: hidden;
            display: flex;
            align-items: center;
            justify-items: self-start;
        }
        .left {
            height: 100vh;
            border-right: 2px solid #666;
        }
        .left ul{
            width:230px;
            background-color: #3399cc;
            height: 100%;
        }
        .left ul li{
            list-style: none;
            width: 230px;
            height: 40px;
            line-height: 40px;
        }
        .left ul .hoved{
            background-color: #fff;
        }
        .left ul li[class="hoved"] a{
            color: #333;
        }
        .left ul li a{
            font-size: 22px;
            display: block;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        .left ul li a:hover{
            color: #333;
            background-color: #fff;
        }
        .content .main{
            display: flex;
            flex-direction: column;
            flex:1;
            height: 100vh;
            background-color: #F5f5f5;
        }
        .content .main .top{
            width: 100%;
            background-color: #eee;
            border-bottom: 1px solid #4ea5df;
            height: 60px;
            display: flex;
            align-items: center;
            justify-self: start;
        }
        .content .main .top a[class="button"]{
            display: inline-block;
            height: 30px;
            width: 120px;
            line-height: 30px;
            text-align: center;
            background-color: #33aabb;
            color: #fff;
            font-size: 20px;
            margin: 10px;
            padding:5px;
            text-decoration: none;
        }
        .content .main .top .system-web{
            display: inline-block;
            flex: 1;
            text-align: right;
        }
        .content .main .top .system-web a[class="select"]{
            font-size: 18px;
            color: #999;
            display: inline-block;
            margin-right: 35px;

        }
        .content .main .message{
            width: 100%;
            flex-grow: 1;
            overflow-y: auto;
        }
        iframe{
            width: 100%;
            height: 100vh;
            overflow-y: auto;
        }
    </style>
    <script>
        var action;
        var content;
        function getmessage(id,str){
            let i = 0;
            let nav = document.getElementById('left-nav');
            let li = nav.getElementsByTagName('li');
            action = str;
            for(i = 0;i < li.length;i++)li[i].className = 'e';
            li[id].className = 'hoved';
            content.src = '/home/list/' + action;
        }
        function add(){
            content.src = '/home/info/' + action;
        }
        function web_selected(){
            content.src = '/home/list/web';
        }
        function selected_web(){
            $.ajax({
                url:'/home/config/web',
                type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
                dataType: 'json', // 预期服务器返回的数据类型  
                data:{},
                success: function(res) { 
                    document.getElementById('selected').innerHTML = '<a href="javascript:web_selected();" class="select">' + res.data.websitr.web + '</a>';
                }
            });
        }
        window.onload = function(){
            action = 'web';
            content = document.getElementById('content');
            let mcee = setInterval(selected_web,3000);
        }
    </script>
</head>
<body>
    <div class="content">
        <div class="left">
            <ul id="left-nav">
                <li class="hoved"><a href="javascript:getmessage(0,'web');">网站管理</a></li>
                <li><a href="javascript:getmessage(1,'nav');">栏目管理</a></li>
                <li><a href="javascript:getmessage(2,'info');">内容管理</a></li>
                <li><a href="javascript:getmessage(3,'tamplate');">模板管理</a></li>
                <li><a href="javascript:getmessage(4,'config');">系统设置</a></li>
            </ul>
        </div>
        <div class="main">
            <div class="top">
                <a href="javascript:add();" class="button">+增加数据</a>
                <div class="system-web" id="selected">
                    <a href="javascript:web_selected();" class="select">{$website.web}</a>
                </div>
            </div>
            <div class="message">
                <iframe id="content" src="/home/list/web" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</body>
</html>